@mixin wh($w, $h: $w) {
  width: $w;
  height: $h;
}
@mixin rect($w, $h, $bg) {
  @include wh($w, $h);
  background: $bg;
}
@mixin square($size, $bg) {
  @include rect($size, $size, $bg);
}
@mixin circle($size, $bg) {
  @include square($size, $bg);
  border-radius: 50%;
}
@mixin oval($w, $h, $bg) {
  @include rect($w, $h, $bg);
  border-radius: 50%;
}

$directions: (
  "up" "down" "left" "right",
  "top-left" "top-right" "bottom-left" "bottom-right"
);
@function isExist($direction) {
  @return index($directions, $direction) != null;
}

/// 三角形；
/// @param {number} $size - 三角形边大小；
/// @param {color} $bg - 三角形背景色；
/// @param {string} $direction - 三角形方向；
/// @example @include triangle(100px, red, "up");
@mixin triangle($size: 100px, $bg: red, $direction: "up") {
  width: 0;
  @if index($directions, $direction) == 0 {
    border-inline: calc($size / 2) solid transparent;
    border-bottom: $size solid $bg;
  } @else if index($directions, $direction) == 1 {
    border-inline: calc($size / 2) solid transparent;
    border-top: $size solid $bg;
  } @else if index($directions, $direction) == 2 {
    border-block: calc($size / 2) solid transparent;
    border-right: $size solid $bg;
  } @else if index($directions, $direction) == 3 {
    border-block: calc($size / 2) solid transparent;
    border-left: $size solid $bg;
  } @else if index($directions, $direction) == 4 {
    border-top: $size solid $bg;
    border-right: $size solid transparent;
  } @else if index($directions, $direction) == 5 {
    border-top: $size solid $bg;
    border-left: $size solid transparent;
  } @else if index($directions, $direction) == 6 {
    height: 0;
    border-bottom: $size solid $bg;
    border-right: $size solid transparent;
  } @else if index($directions, $direction) == 7 {
    height: 0;
    border-bottom: $size solid $bg;
    border-left: $size solid transparent;
  } @else {
    @error "direction is not exist";
  }
}

/// 弧形尾箭头
@mixin curvedarrow($rate: 10%, $bg: red) {
  #curvedarrow {
    position: relative;
    width: 0;
    border-top: calc(90px * $rate) solid transparent;
    border-right: calc(90px * $rate) solid $bg;
    transform: rotate(10deg) translateX(100%);
    &::after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-top: calc(30px * $rate) solid $bg;
      border-radius: calc(200px * $rate) 0 0 0;
      top: -120px * $rate;
      left: -90px * $rate;
      @include wh(120px * $rate, 120px * $rate);
      transform: rotate(45deg);
    }
  }
}

/// 梯形
@mixin trapezoid($w: 100px, $bg: red, $rate: 25%) {
  border-inline: calc($w * $rate) solid transparent;
  border-bottom: $w solid $bg;
  width: $w;
}

/// 平行四边形
@mixin parallelogram($w: 100px, $h: 100px, $bg: red, $skew: 20deg) {
  @include rect($w, $h, $bg);
  transform: skewX($skew);
}

/// 锁
@mixin lock($fsz: 8px, $bg: red) {
  #lock {
    font-size: $fsz;
    position: relative;
    @include wh(18em, 13em);
    border-radius: 2em;
    top: 10em;
    box-sizing: border-box;
    border: 3.5em solid $bg;
    border-inline-width: 7.5em;
    margin: 0 0 6rem 0;
    &::before,
    &::after {
      content: "";
      position: absolute;
      box-sizing: inherit;
      left: 50%;
    }
    &::before {
      border: 2.5em solid $bg;
      @include wh(14em, 12em);
      margin-left: -7em;
      top: -12em;
      border-top-left-radius: 7em;
      border-top-right-radius: 7em;
    }
    &::after {
      @include wh(5em, 8em);
      border: 1em solid $bg;
      border-radius: 2.5em;
      top: -1em;
      margin-left: -2.5em;
    }
  }
}

/// 长指针
@mixin pointer($w: 200px, $h: 40px, $bg: red, $parentBg: #ccc) {
  #pointer {
    $half: calc($h / 2);
    @include rect($w, $h, $bg);
    position: relative;
    &::before,
    &::after {
      position: absolute;
      content: "";
      bottom: 0;
      border-block: $half solid transparent;
    }
    &::before {
      left: 0;
      border-left: $half solid $parentBg;
    }
    &::after {
      right: -20px;
      border-left: $half solid $bg;
    }
  }
}

/// 月儿弯弯
@mixin moon($size: 80px, $bg: red) {
  @include wh($size, $size);
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 $bg;
}

/// 蛋
@mixin egg($width: 126px, $bg: red) {
  $h: $width * 1.429;
  @include rect($width, $h, $bg);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/// 钻石
@mixin diamond($width: 50px, $bg: red) {
  #diamond {
    position: relative;
    box-sizing: content-box;
    $half: calc($width / 2);
    width: $width;
    border-style: solid;
    border-color: transparent transparent $bg transparent;
    border-width: 0 $half $half $half;
    margin: calc($half * 0.8) 0 $width 0;
    &::after {
      content: "";
      position: absolute;
      top: $half;
      left: calc($half * -1);
      border-style: solid;
      border-color: $bg transparent transparent transparent;
      border-width: $width * 1.25 $width 0 $width;
    }
  }
}

/// 无穷大
@mixin infinity($size: 100px, $bg: red) {
  #infinity {
    $half: calc($size / 2);
    position: relative;
    width: $size * 2.12;
    height: $size;
    box-sizing: content-box;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      border: calc($size * 0.2) solid $bg;
      width: $size * 0.6;
      height: $size * 0.6;
      box-sizing: content-box;
    }
    &::before {
      left: 0;
      border-radius: $half $half 0 $half;
      transform: rotate(-45deg);
    }
    &::after {
      left: auto;
      right: 0;
      border-radius: $half $half $half 0;
      transform: rotate(45deg);
    }
  }
}

/// 爱心
@mixin heart($size: 100px, $bg: red) {
  #heart {
    $half: calc($size / 2);
    position: relative;
    width: $size;
    height: $size * 0.9;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      background: $bg;
      width: $half;
      height: $size * 0.8;
      border-radius: $half $half 0 0;
      &::before {
        left: $half;
        transform-origin: 0 100%;
        transform: rotate(-45deg);
      }
      &::after {
        left: 0;
        transform-origin: 100% 100%;
        transform: rotate(45deg);
      }
    }
  }
}

/// 太极
@mixin taichi($size: 100px, $bg: #000, $reversalColor: #fff, $bdw: 1px) {
  #taichi {
    position: relative;
    @include circle($size, $bg);
    border: $bdw solid white;
    background: linear-gradient(90deg, $bg 50%, $reversalColor 50%);
    // animation: rotate 2s linear infinite paused;
    cursor: pointer;
    &:hover {
      animation: rotate 2s linear infinite;
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      @include wh(calc(($size - $bdw * 2) / 2), calc(($size - $bdw * 2) / 2));
      border-radius: 50%;
      left: calc(($size - $bdw * 2) / 4);
    }
    &::before {
      top: 0;

      background: radial-gradient($reversalColor 20%, $bg 20%);
    }
    &::after {
      bottom: 0;
      background: radial-gradient($bg 20%, $reversalColor 20%);
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}

/// 八卦
/// @params {length} $diameter 八卦直径
/// @params {color} $bg 八卦背景色
/// @params {color} $reversalColor 八卦反转色
@mixin eightDiagrams($diameter: 500px, $bg: #f00, $reversalColor: #00f) {
  $radius: calc($diameter / 4);
  width: $diameter;
  height: $diameter;
  border-radius: 50%;
  // border: $bdw solid #000;
  background-image: radial-gradient(
      farthest-side at $radius calc(50% * 1.02),
      $bg $radius,
      transparent $radius
    ),
    radial-gradient(
      farthest-side at $radius * 3 calc(50% * 0.98),
      $reversalColor $radius,
      transparent $radius
    ),
    linear-gradient(to bottom, $bg 50%, $reversalColor 50%);
}

/// Mixin to create a star
/// @author Hugo Giraudel
/// @param {Number} $arms - Number of arms
/// @param {Length} $outerRadius - Outer radius
/// @param {Length} $innerRadius - Inner radius
/// @param {Color} $fill [null] - Fill color
/// @example scss - Star styling
///   .star {
///     @include star(5, 1em, 0.5em, gold);
///     }
@mixin star_svg($arms, $outerRadius, $innerRadius, $fill: null) {
  $centerX: $outerRadius;
  $centerY: $outerRadius;
  $svg-box-width: $outerRadius * 2;
  $svg-box-height: 0;

  $fill: if($fill, "fill='#{$fill}'", "");
  $results: "";
  $angle: calc(pi / $arms);

  @for $i from 0 to ($arms * 2) {
    $r: if(($i % 2) == 0, $outerRadius, $innerRadius);
    $currX: $centerX + sin($i * $angle) * $r;
    $currY: $centerY + cos($i * $angle) * $r;

    $svg-box-height: max($currY, $svg-box-height);

    @if ($i==0) {
      $results: $currX, $currY;
    } @else {
      $results: $results $currX, $currY;
    }
  }
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$svg-box-width} #{$svg-box-height}' %3E%3Cpolygon #{$fill} points='#{$results}' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
}

/**
 * 星星
 * @param {Length} $size - 大小
 * @param {Number} $points - 边数
 * @param {Number} $inset - 内缩比例
 * @param {Color} $fill - 填充色
 */
@mixin star($size: 100px, $points: 5, $inset: 0.75, $fill: gold) {
  position: absolute;
  left: 50%;
  margin-left: 0;
  margin-top: calc($size / -2);
  div {
    border-bottom: $size solid $fill;
    border-top: $size * $inset solid transparent;
    border-right: $size * $inset solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: calc($size * $inset * -1);
    margin-top: calc($size * $inset * -1);
    transform-origin: 50% 100%;

    @for $i from 0 through $points {
      $angle: calc(360deg / $points * $i);
      &:nth-of-type(#{$i + 1}) {
        transform: rotate($angle);
      }
    }
  }
}

/// 六边形；
/// @param {Length} $width - 宽度
/// @param {Color} $background - 背景色
@mixin hexagon($width, $background) {
  $height: calc(60 / 104 * $width);
  background: $background;
  width: $width;
  height: $height;
  position: relative;
  margin: calc($height / 2 + 20);
  box-sizing: border-box;
  @include pseudo-ba {
    @include wh(0, 0);
    display: block;
    border-left: calc($height / 2) solid transparent;
    border-right: calc($height / 2) solid transparent;
  }
  &:before {
    border-bottom: calc($height / 2) solid $background;
    top: calc($height / 2 * -1);
  }
  &:after {
    border-top: calc($height / 2) solid $background;
    top: $height;
  }
}
